import React from 'react';
import {
  Divider,
  Transfer,
  List,
  Card,
  Button,
  Tabs,
  message,
  Icon,
  Tag,
  Table,
  Row,
  Empty,
  Switch,
  ConfigProvider,
  Select,
  TreeSelect,
  Cascader
} from 'antd';
import RcTweenOneTag from './components/rc-tween-one-tag'
import reqwest from 'reqwest';

// import './ui.less';

const TabPane = Tabs.TabPane;
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    sorter: true,
    render: (name) => `${name.first} ${name.last}`,
    width: '20%'
  },
  {
    title: 'Gender',
    dataIndex: 'gender',
    filters: [{text: 'male', value: 'male'}, {text: 'female', value: 'female'}],
    width: '20%'
  },
  {
    title: 'Email',
    dataIndex: 'email',
    sorter: true
    // render: name => `${name.first} ${name.last}`,
  }
];

const customizeRenderEmpty = () => (
  <div style={{textAlign: 'center'}}>
    <Icon type="smile" style={{fontSize: 20}}/>
    <p>Data Not Found</p>
  </div>
);


export default class Buttons extends React.Component {
  state = {}

  render() {
    return (
      <>
        <Card title="1、简单的展示" style={{marginTop: 10}}>
          <Empty/>
        </Card>

        <Card title="2、可以通过设置 image 为 Empty.PRESENTED_IMAGE_SIMPLE 选择另一种风格的图片" style={{marginTop: 10}}>
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
        </Card>

        <Card title="3、自定义图片链接、图片大小、描述、附属内容" style={{marginTop: 10}}>
          <Empty
            image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
            imageStyle={{height: 60,}}
            description={<span> Customize <a href="#API">Description</a> </span>}>
            <Button type="primary">Create Now</Button>
          </Empty>,
        </Card>


        <Card title="4、自定义全局组件的 Empty 样式" style={{marginTop: 10}}>
          <div>
            <Switch
              unCheckedChildren="default"
              checkedChildren="customize"
              checked={this.state.customize}
              onChange={val => {
                this.setState({customize: val})
              }}
            />

            <Divider/>

            <ConfigProvider renderEmpty={this.state.customize && customizeRenderEmpty}>
              <div className="config-provider">
                <h3>Select</h3>
                <Select style={{width: 200}}/>

                <h3>TreeSelect</h3>
                <TreeSelect style={{width: 200}} treeData={[]}/>

                <h3>Cascader</h3>
                <Cascader style={{width: 200}} options={[]} showSearch/>

                <h3>Transfer</h3>
                <Transfer/>

                <h3>Table</h3>
                <Table
                  style={{marginTop: 8}}
                  columns={[{title: 'Name', dataIndex: 'name', key: 'name',}, {
                    title: 'Age',
                    dataIndex: 'age',
                    key: 'age',
                  },]}/>

                <h3>List</h3>
                <List/>
              </div>
            </ConfigProvider>
          </div>
        </Card>


      </>
    );
  }
}
